<template>
    <div class="skill-icon" v-loading="loading" :class="{'no-pointer':classify==='3'}">
        <img v-if="classify==='3' || classify==='2'" :src="realitySrc" alt="" @click="update('reality')">
        <img v-if="classify==='3' || classify==='1'" :src="planSrc" alt="" @click="update('plan')">
    </div>
</template>

<script>
export default {
    props: {
        plan: [String, Number],
        reality: [String, Number],
        uid: [String, Number],
        ukey: [String, Number],
        classify: [String],
    },
    computed: {
        planSrc() {
            return require(`@/assets/images/skill/plan${
                this.plan === '' ? '0' : this.plan
            }.png`)
        },
        realitySrc() {
            return require(`@/assets/images/skill/reality${
                this.reality === '' ? '0' : this.reality
            }.png`)
        },
    },
    name: 'skill',
    data() {
        return {
            loading: false,
        }
    },
    methods: {
        compute(p) {
            const d = parseInt(p)
            const e = d + 1
            return d == 3 ? 0 : e
        },
        update(tag) {
            if (this.classify === '3') {
                return
            }
            this.loading = true
            let params = {
                gaugeKey: this.ukey,
                qmsUserId: this.uid,
            }

            if (tag == 'plan') {
                if (this.plan === '') {
                    params.planGauge = 1
                } else {
                    params.planGauge = this.compute(this.plan)
                }
            }
            if (tag == 'reality') {
                if (this.reality === '') {
                    params.practicalGauge = 1
                } else {
                    params.practicalGauge = this.compute(this.reality)
                }
            }
            this.$emit('update', params, () => {
                this.loading = false
            })
        },
    },
}
</script>

<style scoped>
.skill-icon {
    line-height: 100%;
}
.skill-icon ::v-deep .el-loading-spinner {
    margin-top: -10px;
}
.skill-icon ::v-deep .el-loading-spinner .circular {
    width: 20px;
    height: 20px;
}
.skill-icon img {
    cursor: pointer;
    width: 20px;
    height: 20px;
    margin: 0 4px;
}
.no-pointer img {
    cursor: default !important;
}
</style>
